<template>
  <div class="send-list">
    <a-row :gutter="16">
      <a-col :span="8" v-if="page == 1">
        <a-card :bordered="false" id="first-card">
          <div
            style="
              width: 100%;
              height: 129px;
              border: 1ps dotted rgba(0, 0, 0, 0.1);
              padding-bottom: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
            @click="addSend"
          >
            <span style="font-size: 24px; padding-bottom: 3px">+</span>
            <span style="font-size: 16px; margin-left: 5px">新增模板</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8" v-for="item in list" :key="item.id">
        <a-card :bordered="false">
          <a-card-meta :title="item.name">
            <template #avatar>
              <NotificationOutlined style="font-size: 32px; color: #2681f3" />
            </template>
            <template #description>
              <div
                style="
                  width: 100%;
                  height: 22px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                "
              >
                应用项目: {{ item.village_names }}
              </div>
              <div
                style="
                  width: 100%;
                  height: 22px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  margin-top: 5px;
                "
              >
                发送方式: <a-tag v-if="item.showMessageIcon">短信</a-tag>
                <a-tag v-if="item.showEmailIcon">邮件</a-tag>
                <a-tag v-if="item.showOfficialAccount">公众号</a-tag>
              </div>
            </template>
          </a-card-meta>
          <template class="ant-card-actions" #actions>
            <div @click="addSend(item.id)">
              <SettingOutlined style="font-size: 16px" />
              <span>编辑</span>
            </div>
            <a-popconfirm
              title="确认删除模板吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="deleteSend(item.id)"
            >
              <div>
                <DeleteOutlined style="font-size: 16px" />
                <span>删除</span>
              </div>
            </a-popconfirm>
          </template>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, watch } from "vue";
import {
  NotificationOutlined,
  SettingOutlined,
  DeleteOutlined,
  MobileTwoTone,
  MailTwoTone,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "sendList",
  components: {
    NotificationOutlined,
    SettingOutlined,
    DeleteOutlined,
    MobileTwoTone,
    MailTwoTone,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    page: {
      type: [String, Number],
      default: 1,
    },
  },
  setup(props, context) {
    if (props.list.length > 0) {
      props.list.map((item) => {
        if (item.type_json && item.type_json.length > 0) {
          item.type_json.map((jsonItem) => {
            if (jsonItem.mode == 1 && jsonItem.status == 1) {
              item.showMessageIcon = true;
            }
            if (jsonItem.mode == 2 && jsonItem.status == 1) {
              item.showEmailIcon = true;
            }
            if (jsonItem.mode == 3 && jsonItem.status == 1) {
              item.showOfficialAccount = true;
            }
          });
        }
      });
    }
    const addSend = (id) => {
      if (id > 0) {
        context.emit("addSend", id);
      } else {
        context.emit("addSend");
      }
    };
    const deleteSend = (id) => {
      context.emit("deleteSend", id);
    };
    return {
      addSend,
      deleteSend,
    };
  },
});
</script>

<style lang="less" scoped>
.send-list {
  min-height: 567px;
  :deep(.ant-card) {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  #first-card {
    border: 1px dashed rgba(0, 0, 0, 0.2);
    box-shadow: none;
  }

  :deep(.ant-card-body) {
    min-height: 120px;
    padding-bottom: 14px;
  }
  :deep(.anticon-notification) {
    margin-top: 10px;
  }

  .ant-card-actions {
    span {
      font-size: 13px;
      margin-left: 10px;
    }
  }
}
</style>
